<script setup lang="ts">
import type { PatientInfo } from '@/types/user'
import { computed, onMounted, ref } from 'vue'
import { patientCardRules, patientNameRules } from '@/utils/rules'
import {
  showConfirmDialog,
  showLoadingToast,
  showSuccessToast,
  showToast,
  type FormInstance
} from 'vant'
import {
  addPatientInfoAPI,
  editPatientInfoAPI,
  delPatientAPI
} from '@/services/user'
const props = defineProps<{
  title: string
  showPop: boolean
  patientInfo: PatientInfo
}>()
const emits = defineEmits<{
  (e: 'update:showPop', showPop: boolean): void
  (e: 'success-save'): void
}>()
const options = ref([
  {
    value: 1,
    label: '男'
  },
  {
    value: 0,
    label: '女'
  }
])
// 患者信息
const patient = ref<PatientInfo>({
  name: '',
  idCard: '',
  defaultFlag: 0,
  gender: 1
})
// checkbox选中值为布尔类型，需要进行计算属性的转换
const patient_default = computed({
  set(val) {
    patient.value.defaultFlag = Number(val) as 0 | 1
  },
  get() {
    return patient.value.defaultFlag === 1
  }
})
// 保存患者信息
const form = ref<FormInstance | null>(null)
// 点击保存的操作
const savePatientInfo = async () => {
  // 验证表单数据
  await form.value?.validate()
  // 获取身份证上的性别
  let sex = patient.value.idCard.slice(-2, -1)
  // 判断性别，奇数男，偶数女
  if (Number(sex) % 2 !== patient.value.gender) {
    return showToast('身份证号和性别不符')
  }
  // 判断时编辑患者还是添加患者
  showLoadingToast({
    message: '操作中...',
    forbidClick: true
  })
  if (patient.value?.id) {
    // 编辑患者
    const { name, idCard, defaultFlag, id, gender } = patient.value
    await editPatientInfoAPI({
      name,
      idCard,
      defaultFlag,
      id,
      gender
    })
    // 请求成功之后，显示提示信息
    showSuccessToast('修改成功')
  } else {
    // 添加患者
    await addPatientInfoAPI(patient.value)
    showSuccessToast('添加成功')
  }
  // 关闭弹层，并且重新获取最新的患者信息列表
  emits('success-save')
}
// 删除患者
const delPatient = async () => {
  // 弹框提示，二次判断
  await showConfirmDialog({
    title: '温馨提示',
    message: '您确认需要删除该患者吗？'
  })
  // 使用类型断言
  showLoadingToast('删除中...')
  await delPatientAPI(patient.value.id as string)
  // 关闭弹框，并且重新获取最新的患者信息列表
  emits('success-save')
  showSuccessToast('删除成功！')
}
onMounted(() => {
  // 将数据进行复写
  patient.value = props.patientInfo
})
</script>

<template>
  <div class="add-patient-page">
    <DP-NavBar
      :title="title"
      rightText="保存"
      :back="
        () => {
          emits('update:showPop', false)
        }
      "
      @clickRight="savePatientInfo"
    ></DP-NavBar>
    <van-form class="form" ref="form">
      <van-field
        label="真实姓名"
        placeholder="请输入真实姓名"
        v-model="patient.name"
        :rules="patientNameRules"
        autocomplete="off"
      />
      <van-field
        label="身份证号"
        placeholder="请输入身份证号"
        v-model="patient.idCard"
        :rules="patientCardRules"
        autocomplete="off"
      />
      <van-field label="性别">
        <template #input>
          <DP-radio-btn
            :options="options"
            v-model="patient.gender"
          ></DP-radio-btn>
        </template>
      </van-field>
      <van-field label="默认就诊人">
        <template #input>
          <van-checkbox v-model="patient_default" />
        </template>
      </van-field>
    </van-form>
    <div class="del" v-if="patientInfo?.id">
      <van-button round block @click="delPatient">删除</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.add-patient-page {
  .form {
    margin-top: 46px;
    .van-cell-group {
      margin: 0;
    }
  }
  .del {
    position: fixed;
    padding: 0 15px;
    bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    .van-button {
      color: var(--cp-price);
      background-color: var(--cp-bg);
      border: none;
      font-size: var(--van-checkbox-size);
    }
  }
}
</style>
